<template>
	<view class="box">
		<form @submit="" @reset="" class="change-mobile-form">
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					新手机号
				</view>
				<input type="number" maxlength="11" value="" v-model="mobile" class="flex1" placeholder="请输入手机号"/>
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					验证码
				</view>
				<input type="number" value="" v-model="smsCode" class="flex1" placeholder="请输入验证码"/>
				<button type="primary" :disabled="phoneBtn" class="send-code" @click="getMobileCode">{{phoneMsg}}</button>
			</view>
			<button  type="button" v-clickAgain="phoneSubmit"   form-type="submit" class="next-btn" >提交</button>
		</form>
	</view>
</template>

<script>
	import {sendMsgHank} from '../../static/common.js'
	import api from '../../api/index.js'
	export default {
		data () {
			return {
				mobile:'',//手机号
				smsCode:'',//验证码
				phoneMsg: '获取验证码',
				phoneBtn: false,
				oldMobile:'',//旧手机号
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			// 获取个人信息
			getList () {
				api.wxAuth.getWxUserInfo().then(res=>{
					if (res.code == 1) {
						this.oldMobile=res.data.mobile;
					}
				})
			},
			// 获取手机验证码
			getMobileCode() {
				if(this.mobile===this.oldMobile){
					uni.showToast({
						title: '请输入新的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				sendMsgHank(this.mobile, this)
			},
			// 提交按钮
			phoneSubmit(){
				var mobileRegex = /^1\d{10}$/
				var codeRegex = /^\d{6}$/
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (!codeRegex.test(this.smsCode)) {
					uni.showToast({
						title: '请输入正确的手机验6位数字证码',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var data = {
					mobile: this.mobile,
					validCode: this.smsCode,
				}
				api.wxAuth.newmobileBind(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功'
						})
						uni.navigateBack()
					}
				})
				
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
	.is-disabled{
		background: red;
	}
</style>
